"use strict";
import * as React from 'react';
const { View, TouchableOpacity, ScrollView, DeviceEventEmitter, Alert } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import { activeStyles } from "../../assets/styles/community";
import Avatar from "../../component/Avatar";
import { groupStyles } from "../../assets/styles/groups";
import MyIcon from "../../component/icon";
import MyText from "../../component/MyText";
import { SCREEN_WIDTH } from "../../constant";
import Line from "../../component/Line";
import { guideStyles } from "../../assets/styles/guide";
import MyInputToolBar from "../../component/MyInputToolBar";
import CommentItem from "../../component/CommentItem";
import Request from "../../utils/Request";
import constant from "../../utils/constant";
const moment = require('moment');
const { Toast } = require('antd-mobile');
const Remind = require('react-native-wtfssd-remind').default;
const avatarProps = {
    borderWidth: 1,
    borderColor: '#fff',
    size: 35,
};
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.joinOrLeaveActive = (active) => {
            this.props.dispatch({
                type: 'active/joinOrLeaveActive',
                payload: { active, from: 'myActives' }
            });
            Actions.pop();
            DeviceEventEmitter.emit(constant.noticeKeyOfEnterActiveList);
        };
        this.addEvent = () => {
            const active = this.props.active.activeDetail;
            Remind.addEvent({
                title: active.title,
                location: active.address,
                allDay: false,
                startDate: moment(active.started).format('YYYY-MM-DD HH:mm:ss'),
                endDate: moment(active.ended).format('YYYY-MM-DD HH:mm:ss'),
                URL: 'http://www.hubeihxkj.com',
                notes: active.about
            }).then(e => {
                Toast.success('添加成功', constant.ToastDuration);
            }).catch(e => {
                if (e.message === 'permissions denied') {
                    Alert.alert('警告', '暂无日历权限,请前往设置->隐私->日历->火星空间 打开日历权限', [
                        { text: '取消' },
                        { text: '确定' },
                    ]);
                }
            });
        };
        this.renderMembers = (members) => {
            return members.map((item, index) => {
                return <Avatar key={index} {...avatarProps} style={[groupStyles.member, { zIndex: 8 - (index * 2), backgroundColor: '#DC6451' }]} source={item}/>;
            });
        };
        this.onPraise = (type, item) => {
        };
        this.renderComment = () => {
            let comments = [];
            const activeDetail = this.props.active.activeDetail;
            if (!activeDetail)
                return null;
            if (activeDetail && Array.isArray(activeDetail.comments) && activeDetail.comments.length > 0) {
                activeDetail.comments.map((item, index) => {
                    if (item && item.user) {
                        comments.push(<CommentItem key={index} item={item} onPraisePress={this.onPraise.bind(this, 'postcomment')}/>);
                    }
                });
            }
            return (<View style={{ marginBottom: 35 }}>{comments}</View>);
        };
    }
    render() {
        const item = this.props.active.activeDetail;
        return (<View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton icon={{ name: 'icon-common-fanhui-copy', color: '#fff', size: 25 }}/>} title={<MyText numberOfLines={1} color={'#fff'} style={{
            width: SCREEN_WIDTH, height: 30, paddingHorizontal: 60,
            textAlign: 'center'
        }}>{item.title}</MyText>}/>

                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <View style={[activeStyles.listItem, activeStyles.item, commonStyles.flexRow]}>
                            <View style={[commonStyles.flex1, commonStyles.flexRow]}>
                                
                            </View>
                            <TouchableOpacity onPress={this.joinOrLeaveActive.bind(this, item)}>
                                <View style={[commonStyles.flexRow, groupStyles.joinBtn, item.isJoin ? groupStyles.isJoin : null]}>
                                    <MyIcon name={!item.isJoin ? 'icon-jia1' : 'icon-gou'} color={item.isJoin ? '#999' : '#000'} size={15}/>
                                    <MyText fontSize={15} style={{ marginLeft: 5 }} color={item.isJoin ? '#999' : '#000'}>{item.isJoin ? '已加入' : '加入'}</MyText>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <Line height={10}/>
                        <View style={[, activeStyles.listItem, activeStyles.item]}>
                            <View style={[commonStyles.flexRow, { alignItems: 'center' }]}>
                                <Avatar source={{ uri: Request.checkImageUrl(item.pic) + '' }} circle={false} size={autoSize(85)}/>
                                <View style={commonStyles.flex1}>
                                    <MyText style={{ marginLeft: 10 }} numberOfLines={1} fontSize={20} color={'#333'} fontWeight={'500'}>{item.title}</MyText>
                                </View>
                            </View>
                            <MyText style={{ paddingVertical: 10 }}>{item.title}</MyText>
                            <View style={{ paddingHorizontal: 10, display: 'flex' }}>
                                <Line width={SCREEN_WIDTH - 20}/>
                            </View>

                            <MyText style={{ paddingVertical: 10, marginBottom: 30 }}>{item.address}</MyText>
                            <MyText style={{ paddingVertical: 10 }}>{item.about}</MyText>
                        </View>
                        <View style={{ backgroundColor: '#E0E0E0', paddingVertical: 10 }}>
                            <TouchableOpacity activeOpacity={0.9} onPress={this.addEvent}>
                                <View style={guideStyles.loginBth}>
                                    <MyText style={guideStyles.loginText}>添加到日历</MyText>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={[{ backgroundColor: '#F5F4F4', padding: 10 }]}>
                            <MyText>活动评论</MyText>
                        </View>
                        {this.renderComment()}
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    </ScrollView>
                </View>
                <MyInputToolBar placeholder="评论这个活动"/>

            </View>);
    }
}
export default connect(({ auth, active }) => ({ auth, active }))(Page);
